<template>
  <a-modal
    :title="title"
    :visible="isShow"
    @ok="handleSubmit"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    @cancel="handleCancel"
    width="40%"
    :destroyOnClose="true"
  >
    <a-form :form="form">
      <a-form-item
        label="表名："
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-input
          v-decorator="[
            'tableEname',
            { rules: [{ required: true, message: '请输入表名' }] }
          ]"
          placeholder="请输入表名"
          :disabled="isEdit"
        />
      </a-form-item>
      <a-form-item
        label="表中文名："
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-input
          v-decorator="[
            'tableCname',
            { rules: [{ required: true, message: '请输入表中文名' }] }
          ]"
          placeholder="请输入表中文名"
        />
      </a-form-item>
      <a-form-item
        label="资源编号："
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-input
          v-decorator="[
            'sourceId',
            { rules: [{ required: true, message: '请输入资源编号' }] }
          ]"
          placeholder="请输入资源编号"
        />
      </a-form-item>
      <a-form-item
        label="资源目录编号："
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-input
          v-decorator="[
            'directoryCode',
            { rules: [{ required: false, message: '请输入资源目录编号' }] }
          ]"
          placeholder="请输入资源目录编号"
        />
      </a-form-item>
      <a-form-item
        label="数据来源单位："
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-input
          v-decorator="[
            'sourceDepartment',
            { rules: [{ required: false, message: '请输入数据来源单位' }] }
          ]"
          placeholder="请输入数据来源单位"
        />
      </a-form-item>
      <a-form-item
        label="数据来源系统："
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-input
          v-decorator="[
            'sourceSystem',
            { rules: [{ required: false, message: '请输入数据来源系统' }] }
          ]"
          placeholder="请输入数据来源系统"
        />
      </a-form-item>
      <a-form-item
        label="共享范围："
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-input
          v-decorator="[
            'sharingRange',
            { rules: [{ required: false, message: '请输入共享范围' }] }
          ]"
          placeholder="请输入共享范围"
        />
      </a-form-item>
      <a-form-item
        label="共享方式："
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-input
          v-decorator="[
            'sharingMode',
            { rules: [{ required: false, message: '请输入共享方式' }] }
          ]"
          placeholder="请输入共享方式"
        />
      </a-form-item>
      <a-form-item
        label="包含要素："
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-input
          v-decorator="[
            'containsElements',
            { rules: [{ required: false, message: '请输入包含要素' }] }
          ]"
          placeholder="请输入包含要素"
        />
      </a-form-item>
      <a-form-item
        label="更新周期："
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-select
          style="width:210px"
          placeholder="请选择数量"
          v-decorator="[
            'updateType',
            { rules: [{ required: false, message: '请选择数量' }] }
          ]"
        >
          <a-select-option
            v-for="(item, index) in updateNum"
            :key="index"
            :value="item"
            >{{ item }}</a-select-option
          >
        </a-select>
        <a-select
          style="width:150px;margin-left:15px;"
          placeholder="请选择更新周期"
          @change="selectChange"
          v-decorator="[
            'updateUnit',
            {
              initialValue: 2,
              rules: [{ required: false, message: '请选择更新周期' }]
            }
          ]"
        >
          <a-select-option :value="0">无更新</a-select-option>
          <a-select-option :value="1">分钟</a-select-option>
          <a-select-option :value="2">小时</a-select-option>
          <a-select-option :value="3">天</a-select-option>
          <a-select-option :value="4">周</a-select-option>
          <a-select-option :value="5">月</a-select-option>
          <a-select-option :value="6">年</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="资源摘要："
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-input
          v-decorator="[
            'remarks',
            { rules: [{ required: false, message: '请输入资源摘要' }] }
          ]"
          placeholder="请输入资源摘要"
        />
      </a-form-item>
      <a-form-item
        label="是否消费："
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-radio-group
          name="radioGroup1"
          v-decorator="[
            'isConsume',
            {
              initialValue: 2,
              rules: [{ required: true, message: '请选择部门类型' }]
            }
          ]"
        >
          <a-radio :value="1">是</a-radio>
          <a-radio :value="2">否</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        label="是否可导入资源："
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-radio-group
          name="radioGroup2"
          v-decorator="[
            'isImport',
            {
              initialValue: 2,
              rules: [{ required: false, message: '请选择是否可导入资源' }]
            }
          ]"
        >
          <a-radio :value="1">是</a-radio>
          <a-radio :value="2">否</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        label="是否可导出资源："
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-radio-group
          name="radioGroup3"
          v-decorator="[
            'isExport',
            {
              initialValue: 2,
              rules: [{ required: false, message: '请选择是否可导出资源' }]
            }
          ]"
        >
          <a-radio :value="1">是</a-radio>
          <a-radio :value="2">否</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        v-if="!isEdit"
        class="fl"
        label="表结构："
        style="position:relative; margin-left: 12px;"
      >
        <div class="upLoadBox">
          <a-button type="primary" icon="download">
            <!-- <a @click="onOutItem" style="margin-left: 12px; color: white;"
              >下载模板</a
            > -->
            <a :href="downUrl" style="margin-left: 12px; color: white;"
              >下载模板</a
            >
          </a-button>
          <a-upload
            style="margin-left:20px;"
            v-decorator="[
              'file',
              { rules: [{ required: true, message: '请上传表结构!' }] }
            ]"
            name="file"
            :multiple="true"
            :beforeUpload="beforeUpload"
            :remove="remove"
            :fileList="fileList"
            @change="handleChange"
          >
            <a-button> <a-icon type="upload" /> 上传表结构 </a-button>
          </a-upload>
        </div>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import { page } from "@/api";
import config from "@/config";
export default {
  // props: ['show', 'disposeIds'],
  data() {
    return {
      form: this.$form.createForm(this),
      confirmLoading: false,
      isShow: false,
      addTime: "",
      id: "",
      getPars: {
        currentPage: 1,
        pageSize: 10,
        name: ""
      },
      roleList: [],
      isEdit: false,
      title: "",
      updateNum: [],
      file: null,
      fileList: [],
      downUrl: `${config.fileUrl}/api/v1/file/downTemplate?fileName=tableStrucrture.xlsx&templateName=tableStrucrture.xlsx`
    };
  },
  mounted() {},
  methods: {
    show(record) {
      confirmLoading: false;
      this.isShow = true;
      // this.getRole();
      // debugger;
      if (record === undefined) {
        // 新增用户
        this.isEdit = false;
        this.title = "新增资源";
        this.selectChange(2); // 默认是小时
      } else {
        // 编辑用户
        this.isEdit = true;
        this.title = "编辑资源";
        this.id = record.id;
        page.tableDetail({ sourceId: record.sourceId }).then(res => {
          if (res.data.code === -1) {
            this.$message.warning(res.data.message);
          } else {
            this.form.setFieldsValue({
              tableEname: res.data.data.tableEname,
              tableCname: res.data.data.tableCname,
              sourceDepartment: res.data.data.sourceDepartment,
              sourceId: res.data.data.sourceId,
              directoryCode: res.data.data.directoryCode,
              sourceSystem: res.data.data.sourceSystem,
              isConsume: res.data.data.isConsume,
              isImport: res.data.data.isImport,
              isExport: res.data.data.isExport,
              sharingRange: res.data.data.sharingRange,
              sharingMode: res.data.data.sharingMode,
              containsElements: res.data.data.containsElements,
              remarks: res.data.data.remarks,
              updateType: res.data.data.updateType,
              updateUnit: Number(res.data.data.updateUnit)
            });
            debugger;
          }
        });
      }
    },
    selectChange(value) {
      this.updateNum = [];
      // debugger
      switch (value) {
        case 0: // 无更新
          this.form.setFieldsValue({
            updateType: ""
          });
          break;
        case 1: //分钟
          for (let i = 1; i <= 60; i++) {
            this.updateNum.push(String(i));
          }
          break;
        case 2: //小时
          for (let i = 1; i <= 24; i++) {
            this.updateNum.push(String(i));
          }
          break;
        case 3: // 天
          for (let i = 1; i <= 31; i++) {
            this.updateNum.push(String(i));
          }
          break;
        case 4: // 周
          for (let i = 1; i <= 4; i++) {
            this.updateNum.push(String(i));
          }
          break;
        case 5: // 月
          for (let i = 1; i <= 12; i++) {
            this.updateNum.push(String(i));
          }
          break;
        case 6: // 年
          for (let i = 1; i <= 12; i++) {
            this.updateNum.push(String(i));
          }
          break;
      }
      debugger;
    },
    getRole() {
      page.getRoleList(this.getPars).then(res => {
        if (res.data.data !== null) {
          this.roleList = res.data.data.records;
        }
      });
    },
    handleCancel() {
      this.isShow = false;
      // this.$emit('disposeFormClose')
      this.remove();
      this.fileList = [];
    },
    onOutItem() {
      let params = {
        fileName: "1111.xlsx",
        templateName: "tableStrucrture.xlsx"
      };
      page.exportExcel(params).then(res => {
        const content = res.data.data;
        // let url = this.baseUrl + 'file/' + content
        let url = "/file/" + content;
        const link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", "tableStrucrture.xls");
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    },
    handleChange(info) {
      let fileList = [...info.fileList];
      fileList = fileList.slice(-1);
      fileList = fileList.map(file => {
        if (file.response) {
          // Component will show file.url as link
          file.url = file.response.url;
        }
        return file;
      });
      this.fileList = fileList;
    },
    beforeUpload(file, fileList) {
      this.file = file;
      return false;
    },
    remove() {
      this.file = null;
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          let tableEname = this.form
            .getFieldValue("tableEname")
            .substring(0, 1);
          var reg = /^[A-Za-z]+$/;
          if (!reg.test(tableEname)) {
            this.$message.warning("表名必须以字母开头");
            return;
          }

          // debugger;
          if (!this.isEdit) {
            //添加
            // debugger;
            let param = new FormData();
            if (this.file) {
              param.append("files", this.file);
            }
            for (let temp in values) {
              if (temp !== "file") {
                if (values[temp] === undefined) {
                  values[temp] = "";
                }
                console.log("ff:" + temp, values[temp]);
                param.append(temp, values[temp]);
              }
            }
            // debugger;
            this.confirmLoading = true;
            page
              .addTable(param)
              .then(res => {
                if (res.data.code === -1) {
                  this.$message.warning(res.data.message);
                } else {
                  this.isShow = false;
                  this.remove();
                  this.fileList = [];
                  this.$emit("addSuccess");
                  this.$message.success("添加成功");
                }
                this.confirmLoading = false;
              })
              .catch(() => {
                this.isShow = false;
                this.confirmLoading = false;
                this.$message.warning("添加失败");
              });
          } else {
            //更新
            let params = Object.assign(values, { id: Number(this.id) });
            page
              .updateTable(params)
              .then(res => {
                if (res.data.code === -1) {
                  this.$message.warning(res.data.message);
                } else {
                  this.isShow = false;
                  this.confirmLoading = false;
                  this.$emit("updateSuccess");
                  this.$message.success("更新成功");
                }
              })
              .catch(() => {
                this.isShow = false;
                this.confirmLoading = false;
                this.$message.warning("更新失败");
              });
          }
        }
      });
    }
  }
};
</script>
<style scoped>
.upLoadBox {
  position: absolute;
  left: 88px;
  top: -38px;
  width: 400px;
}
</style>
